
<!DOCTYPE html>
<html>
<head>
  <title>Internet of Things - ThingSpeak</title>
  <link href="/stylesheets/custom.css?1329424228" media="screen" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>




</head>
<body>
<script type="text/javascript" src="https://api.thingspeak.com/javascripts/highcharts.js"></script>
<script type="text/javascript">

	// users timezone offset
	var myOffset = new Date().getTimezoneOffset();

	// converts date format from JSON
	function getChartDate(d) {
		// get the data using javascript's date object (year, month, day, hour, minute, second)
		// months in javascript start at 0, so remember to subtract 1 when specifying the month
		// offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
		return Date.UTC(d.substring(0,4), d.substring(5,7)-1, d.substring(8,10), d.substring(11,13), d.substring(14,16), d.substring(17,19)) - (myOffset * 60000);
	}

	$(document).ready(function() {
		// blank array for holding chart data
		var chartData = [];
		// variable for the date string
		var d;
		// variable for the data point
		var p;
		// variable for the local date in milliseconds
		var localDate;

		// get the data with a webservice call
		$.getJSON('https://api.thingspeak.com/channels/9/field/1.json?callback=?&amp;results=15&amp;offset=0', function(data) {
			// if no access
			if (data == '-1') {
				$('#chart-container').append('This channel is not public.  To embed charts, the channel must be public or a read key must be specified.');
			}

			// iterate through each feed
			$.each(data.feeds, function() {
				p = this.field1;
				// if a numerical value exists add it
				if (!isNaN(parseInt(p))) {
					chartData.push([getChartDate(this.created_at), parseFloat(p)]);
				}
			});

			// specify the chart options
			var chartOptions = {
				chart: {
					renderTo: 'chart-container',
					defaultSeriesType: 'line',
					backgroundColor: '#ffffff',
					events: {
						load: function() {
							// push data every 15 seconds
							setInterval(function() {

								// get the data with a webservice call
								$.getJSON('https://api.thingspeak.com/channels/9/feed/last.json?callback=?&amp;offset=0', function(data) {
									p = data.field1;
									d = getChartDate(data.created_at);
									last_date = dynamicChart.series[0].data[dynamicChart.series[0].data.length-1].x;

									// if a numerical value exists and it is a new date, add it
									if (!isNaN(parseInt(p)) && (d != last_date)) {
										dynamicChart.series[0].addPoint([d, parseFloat(p)], true, true);
									}
								});

							}, 15000);
						}
					}
				},
				title: {
					text: ''
				},
				plotOptions: {
					line: {
						color: '#d62020'
					},
					bar: {
						color: '#d62020'
					},
					column: {
						color: '#d62020'
					},
					series: {
						marker: {
							radius: 3
						},
						animation: true
					}
				},
				tooltip: {
					// reformat the tooltips so that local times are displayed
					formatter: function() {
						var d = new Date(this.x + (myOffset*60000));
						return this.series.name + ':<b>' + this.y + '</b><br/>' + d.toDateString() + '<br/>' + d.toTimeString().replace(/\(.*\)/, "");
					}
				},
				xAxis: {
					type: 'datetime',
					title: {
						text: ''
					}
				},
				yAxis: {
					title: {
						text: ''
					}
				},
				legend: {
					enabled: false
				},
				series: [{
					name: data.channel.field1
				}]
			};

			// add the data to the chart
			chartOptions.series[0].data = chartData;

			// set chart labels here so that decoding occurs properly
			chartOptions.title.text = 'Dynamic Light Levels';
			chartOptions.xAxis.title.text = 'Time';
			chartOptions.yAxis.title.text = data.channel.field1;

			// draw the chart
			var dynamicChart = new Highcharts.Chart(chartOptions);

		});

	});

</script>

<br />

<div id="chart-container" style="width: 500px; height: 260px; padding-left: 20px; float: left;"></div>

<br class="CB" />
<br />

<br class="CB" />
<br />


</body>
</html>
